import { Button, Dropdown, MenuProps, Popover, Tooltip } from "antd";
import { useComponentConfigStore } from "@/stores/low-editor-comps-conf";
import { useComponentsStore } from "@/stores/edit-pages-store";

export function AddEventButton() {
  const { curComponent, addComponentEvent, curComponentId } = useComponentsStore();
  const { flatComponentConfig } = useComponentConfigStore();
  const componentConfig = flatComponentConfig();

  const onClick: MenuProps['onClick'] = ({ key }) => {
    addComponentEvent(curComponentId, key);
  };
  const allEvents = componentConfig?.[curComponent!.name]?.events
  const curProps = curComponent?.props || {}
  const AllPropsKey = Object.keys(curProps);
  const items: MenuProps["items"] = allEvents?.map(item => {
    const disabled = AllPropsKey.includes(item.name);
    const title = disabled ? "您已添加该事件" : "";
    return { 
      key: item.name,
      label: (
        <Tooltip placement="left" title={title}>
          {item.label}
        </Tooltip>
      ),
      disabled
    }
  });
  return (
    <Dropdown menu={{ items, onClick }} placement="bottom" trigger={["click"]}>
      <Button block type="primary" ghost>
        添加事件
      </Button>
    </Dropdown>
  );
}
